<template>
  <div class="conten">
    <div class="topimg" >
      <img src="../../assets/jb/banner1.jpg" alt="">
    </div>
    <div class="indextop">
      <img src="../../assets/jb/robot.png" alt="" style="margin:0px 50px">
      <div class="index1">
          <p style="font-size:13px;">今日盈利</p>
          <h3>{{ userInfo.today_revenue|numberFormat(4) }}  <P style="color:#fff;font-size:13px;">USDT</P></h3>
          <P style="font-size:13px;"> {{ userInfo.today_revenue * userInfo.cny_rate|numberFormat(4) }} cny</P>
      </div>
      
      <!-- <div class="right-info">
          <p>今日收益比</p>
          <span>+0.98%</span>
      </div> -->

    </div>
    <div class="indexz">
        <div class="indexz1" 
          @click="handleLink('/authorize')"
        >
            <img src="../../assets/jb/api.png" alt="">
           
        </div>
         <div class="indexz1"
            @click="handleLink('/home/revenue')"
         >
            <img src="../../assets/jb/wo.png" alt="">
          
        </div>
         <div class="indexz1" @click="show=true">
            <img src="../../assets/jb/ying.png" alt="">
          
        </div>
        <div v-show="show" class="van-overlay" @click="show=false">
          <p>敬请期待</p>
        </div>

    </div>
  <notice></notice>
  <rank></rank>
  <markets></markets>

    
  </div>
</template>

<script>
import { Swipe, SwipeItem, Dialog } from 'vant'
import { mapState, mapActions } from 'vuex'
import notice from './components/notice'
import rank from './components/rank'
import menuPic from './components/menuPic'
import markets from './components/markets'

export default {
  layout: 'navigation',
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    notice,
    rank,
    menuPic,
    markets
  },
  data() {
    return { show: false }
  },
  async created(){
    if(localStorage.getItem('USER_TOKEN')){
       await this.getUserInfo();
    }
  },
  computed: {
    ...mapState({
      banner: index => index.banner,
      userInfo: ({ user }) => user.userInfo || {},
    })
  },
  mounted() {
    this.getBanner()
  },
  methods: {

    ...mapActions({
      getBanner: 'getBanner',
      getUserInfo: 'user/getUserInfo'
    }),
    handleLink (path) {
      this.$router.push(path)
    },
    viewDetail(item) {
      this.$router.push({
        name: 'common-article',
        params: {
          url: item.url,
          title: item.title
        }
      })
    }
  },
}
</script>

<style scoped lang="less">
.indextop{
     width: 90%;
    height: 100px;
    border-radius: 10px;
    background: #02A488;
    margin-left: 3%;
    display: flex;
    align-items: center;
    position: absolute;
    justify-content: space-between;
    top: 167px;
    img{
      width: 47.5px;
      height: 74px;
    }
    .right-info{
      margin-right: 10px;
      display: flex;flex-flow: column;
      color: #fff;
      text-align: right;
      p{
        margin-bottom: 20px;
      }
    }
}

.index1{
  width:50%;
  
  color:#fff;
  
}
.index1 h3{
  display: flex;
    font-size: 23px;
    margin: 8px 0px;
    align-items: center;
}
.indexz{
  width:100%;
  height:80px;
  display:flex;
  margin-top: 63px;
}
.indexz1{
  width:33%;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.indexz1 img{
  width:60px;
}
.quan{
  width:97%;
  height:30px;
  display:flex;
  align-items: center;
  margin-left: 13px;

}
.quan h4{
  border-bottom: solid 1px #02A488;
}
.quan p{
  font-size:12px;
  margin-left:20px;
  color:#909399
}

.van-overlay{
  z-index: 11111;
  background: none;
 p{
    background-color: rgba(0, 0, 0, 0.7);
    width:334px;
    line-height:60px;
    height: 60px;
    z-index: 1111;
    color: #fff;
    text-align: center;
    margin:auto;
    margin-top: 34vh;

    border-radius: 10px;
 }
}
.conten{
  padding: 10px 10px 0;
  background: #fff;
}

.topimg{
  width: 100%;
  height: 207px;
  margin: 0px;
  position: relative;
  img{
    width: 100%;
    height:100%
  }
}
.my-swipe {
  height: 150px;
}
.van-swipe-item {
  font-size: 0;
}
h4{
  color: #333333;
  font-size: 18px;
}
ul{
  width: 100%;
  overflow: hidden;
  margin-top: 10px;
  li{
    width: 48%;
    height: 82px;
    background: #F1F2F9;
    float: left;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    p{
      color: #2E3233;
      font-size:16px;
      font-weight: 700;
      overflow: hidden;
      margin-bottom: 8px;
      img{
        float: right;
        width: 22px;
      }
    }
    span{
      color: #909399;
      font-size: 12px;
    }
  }
  li:nth-child(odd){
    float: right;
  }
}
</style>
